<style>
	form.form .error.alert{
		padding:2px 10px;
		margin-left:20px;
	}
</style>
  <div class="padding-all">
	  <div ng-include src="'/ksr/partials/breadcrumb.htm'" ng-if="breadcrumbs"></div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">{{title}}</h3>
	  </div>
	  <div class="panel-body">
		<form role="form" name="businessForm" class="form" ng-submit="businessForm.$valid&&submit()" novalidate>
		  <div class="form-group">
		    <label for="business.businessName">Name</label>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.businessName.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Name is required
	    	</span>
		    <input type="text" class="form-control" name="businessName" ng-model="business.businessName" placeholder="Enter business name" ng-required="true"/>
		  </div>
		  <div class="form-group">
		    <label for="business.cagetories">Categories</label>
		    <span class="error alert alert-danger" ng-show="submitted&&business.categories.length==0">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Category is required
	    	</span>
		    <div class="padding-all border-all round-corner" ng-show="business.categories.length>0">
		    	<span ng-repeat="cate in business.categories">
		    		{{cate.name}} <span ng-if="!$last">,</span>
		    	</span>
		    </div>
		    <div class="alert alert-warning" ng-show="business.categories.length==0">Please select categories from the lists below!</div>
		  </div>
	   		<category-list parent-type="business"></category-list>
		  <div class="form-group margin-top">
		    <label for="business.emailAddress">Email</label>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.emailAddress.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Email is required
	    	</span>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.emailAddress.$error.email">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Invalid email
	    	</span>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.emailAddress.$error.ngRemoteValidate">
		    	<span class="glyphicon glyphicon-warning-sign"></span> This email is already registered
	    	</span>
		     <input type="email" class="form-control" name="emailAddress" ng-model="business.emailAddress" placeholder="Enter email" ng-required="true" ng-remote-validate="check-email-availablity.json"/>
		  </div>
		  <div class="form-group">
		    <label for="business.phoneNumber">Phone</label>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.phone.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Phone is required
	    	</span>
		    <input type="tel" class="form-control" name="phone" ng-model="business.phoneNumber" placeholder="Enter phone number" ng-required="true"/>
		  </div>
		  <div class="form-group">
		    <label for="business.specialty">Specialty</label>
		    <span class="error alert alert-danger" ng-show="submitted&&businessForm.specialty.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Specialty is required
	    	</span>
		    <input type="text" class="form-control" name="specialty" ng-model="business.specialty" placeholder="Enter specialty" ng-required="true"/>
		  </div>
		  <div class="form-group">
		    <label for="business.webSite">Website (optional)</label>
		  	<span class="error alert alert-warning" ng-show="submitted&&businessForm.website.$error.url">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Invalid Url
	    	</span>
		    <input type="url" class="form-control" name="website" ng-model="business.webSite" placeholder="Enter website"/>
		  </div>
		  <div class="form-group">
		    <label for="business.description">Description (optional)</label>
		    <textarea class="form-control" ng-model="business.description" placeholder="Enter description"></textarea>
		  </div>
		  <span ng-if="mode==='create'">
			  <div class="form-group">
			    <label for="password">Password</label>
			    <span class="error alert alert-danger" ng-show="submitted&&businessForm.password.$error.required">
			    	<span class="glyphicon glyphicon-warning-sign"></span> Password is required
		    	</span>
		    	<span class="error alert alert-danger" ng-show="submitted&&businessForm.password.$error.match">
			    	<span class="glyphicon glyphicon-warning-sign"></span> Passwords should match
		    	</span>
			    <input type="password" class="form-control" name="password" ng-model="business.password" ng-required="true" placeholder="Enter your password" match="confirmPassword"/>
			  </div>
			  <div class="form-group">
			    <label for="verify-password">Confirm password</label>
			    <input type="password" class="form-control" name="confirmPassword" ng-model="confirmPassword" placeholder="Reenter your password to verify" />
			  </div>
		  </span>
		  <button type="submit" ng-click="submitted=true" class="btn btn-primary">Submit</button>
		</form>
	  </div>
	</div>
	
	<!-- 
	<pre ng-bind="business | json"></pre>
	<pre ng-bind="categoryList | json"></pre>
	 -->
 </div>
 
 
 
 